<template>
	<view class="" @tap="jump('/pages/goods/detail/index', { id: detail.id })">
		<view class="min-goods">
			<view class="img-box">
				<!-- <view class="tag" v-if="detail.activity_type === 'groupon'">{{ detail.activity.rules.team_num }}人团</view> -->
				<image class="img" :src="'http://three.qianjiwl.xyz' + detail.image" mode="widthFix"></image>
			</view>
			<view class="price-box">
				<!-- <view class="y-f"> -->
					<view class="">
						{{detail.title}}
					</view>
					<text class="paddim">
						{{ detail.team_num }} 人团
					</text>
					<view class="seckill-current">￥{{ detail.activity_type === 'groupon' ? detail.groupon_price : detail.price }}<text class="original">￥{{ detail.original_price }}</text></view>
				<!-- </view> -->
			</view>
		</view>
		<view class="count flex align-center" style="margin-bottom: 50rpx;">
			<view class="">
				<u-count-down :show-border="true" color="#fff" :timestamp="detail.endtime" border-color="#FF5280" bg-color="#FF5280"></u-count-down>
				<text style="margin-left: 20rpx;">结束</text>
			</view>
			<view class="padding flex align-center justify-center">
				马上拼
			</view>
		</view>
		<!-- <view class="title"><slot name="titleText"></slot></view> -->
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			timestamp: 60
		};
	},
	props: {
		detail: Object,
	},
	computed: {},
	methods: {
		// 路由跳转
		jump(path, parmas) {
			this.$Router.push({ path: path, query: parmas });
		}
	}
};
</script>

<style lang="scss">
.count {
	// z-index: 9999;
	width: 100%;
	// height: 80rpx;
	display: flex;
	align-items: center;
	padding-top: 20rpx;
	border-top: 1rpx solid #F8F8F8;
	justify-content: space-between;
	
	.padding {
		 
		color: #FFFFFF;
		padding: 16rpx 40rpx;
		border-radius: 10rpx;
		// margin: 20rpx 0;
		background-color: #FF5280;
	}
}
	
.min-goods {
	width: 100%;
	display: flex;
	background: #fff;
	margin-bottom: 16rpx;
	.img-box {
		// width: 320rpx;
		// height: 320rpx;
		// padding-left: 10rpx;
		// overflow: hidden;
		// position: relative;
		// .tag {
		// 	position: absolute;
		// 	left: 0;
		// 	bottom: 0rpx;
		// 	z-index: 2;
		// 	line-height: 35rpx;
		// 	background: linear-gradient(132deg, rgba(243, 223, 177, 1), rgba(243, 223, 177, 1), rgba(236, 190, 96, 1));
		// 	border-radius: 0px 18rpx 18rpx 0px;
		// 	padding: 0 10rpx;
		// 	font-size: 24rpx;
		// 	font-family: PingFang SC;
		// 	font-weight: bold;
		// 	color: rgba(120, 79, 6, 1);
		// }
		.img {
			width: 180rpx;
			height: 180rpx;
			// background-color: #ccc;
		}
	}
	.price-box {
		width: 100%;
		margin: 10rpx 0 0 40rpx;
		
		.paddim {
			padding: 7rpx 20rpx;
			color: #FE5C03;
			margin: 17rpx 0;
			display: inline-block;
			border-radius: 10rpx;
			font-size: 22rpx;
			background-color: #FFEFE5;
		}
		
		.seckill-current {
			font-size: 30rpx;
			font-weight: 500;
			color: rgba(225, 33, 43, 1);
		}
		.original {
			font-size: 20rpx;
			font-weight: 400;
			text-decoration: line-through;
			color: rgba(153, 153, 153, 1);
			margin-left: 14rpx;
		}
	}
	.title {
		font-size: 26rpx;
	}
}
</style>
